<template>
	<div class="container add_edit">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
			<el-form-item label="福利图片" prop="img">
				<uni-file-picker v-model="imageValue" fileMediatype="image" returnType="object"
					:image-styles="imageStyle" @success="imgUpload" @delete="imgDelete" />
			</el-form-item>
			<el-form-item label="跳转类型">
				<el-radio-group v-model="form.type">
					<el-radio label="小程序">小程序</el-radio>
					<el-radio label="网页">网页</el-radio>
					<el-radio label="小程序插件">小程序插件</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="跳转地址" prop="url">
				<el-input v-model="form.url" placeholder="请输入跳转地址"></el-input>
				<label v-if="form.type == '网页'" style="margin-left: 12px; color: red">非个人小程序且需配置业务域名</label>
				<label v-if="form.type == '小程序'" style="margin-left: 12px; color: red">例如： /pages/index/index</label>
				<label v-if="form.type == '小程序插件'" style="margin-left: 12px; color: red">目前只支持折扣充值和折扣影票插件</label>
			</el-form-item>

			<el-form-item label="appId" v-if="form.type == '小程序'">
				<el-input v-model="form.appId" placeholder="请输入小程序appId"></el-input>
			</el-form-item>

			<el-form-item label="排序">
				<el-input type="number" v-model.number="form.sort" min="0" placeholder="请输入排序"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
			</el-form-item>
			
			<el-form-item v-if="form.type != '网页'" label="按钮文字">
				<el-input v-model="form.btn_label" placeholder="请输入按钮文字"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-switch v-model="form.state" active-color="#F9D749" inactive-color="#bbb" active-value="启用"
					inactive-value="禁用"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
				<el-button @click="returnPage">返回列表</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import bus from '@/common/bus'
	const __name = 'ny-app-banner'
	export default {
		data() {
			return {
				dataId: '',
				form: {
					img: '',
					type: '小程序',
					url: '',
					appId: '',
					sort: 0,
					remark: '',
					btn_label:"",
					state: '启用'
				},
				imageValue: null,
				imageStyle: {
					height: '200px',
					width: '500px'
				},
				remark: '',
				rules: {
					img: [{
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}],
					url: [{
						required: true,
						message: '请输入跳转地址',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			async loadData() {
				if (!this.dataId) {
					return
				}

				await this.$db[__name].tofirst(this.dataId).then(res => {
					if (res.code == 200) {
						for (let item in this.form) {
							this.form[item] = res.datas[item]
						}
						if (this.form.img) {
							this.imageValue = {}
							this.imageValue.url = this.form.img
						}
					}
				})
			},
			submitForm(formName) {
				if (this.form.type == '小程序' && !this.form.appId) {
					this.$message.error('请输入小程序appId')
					return false
				}
				this.$refs[formName].validate((valid, obj) => {
					// 默认获取第一个未验证 form 属性名
					this.$api.set_unvalidated_form_focus(this, obj)
					if (valid) {
						if (!this.dataId) {
							this.$db[__name].add(this.form).then(res => {
								if (res.code == 200) {
									this.getOpenerEventChannel().emit('loadData')
									this.returnPage()
								}
							}).catch(err => {
								uni.showModal({
									content: err.message,
									showCancel: false
								})
							})
						} else {
							this.$db[__name].update(this.dataId, this.form).then(res => {
								if (res.code == 200) {
									this.getOpenerEventChannel().emit('loadData')
									this.returnPage()
								}
							}).catch(err => {
								uni.showModal({
									content: err.message,
									showCancel: false
								})
							})
						}
					}
				})
			},
			imgUpload(e) {
				console.log('e', e)
				this.form.img = e.tempFilePaths[0]
			},
			imgDelete() {
				this.imageValue = null
				this.form.img = ''
			},
			returnPage() {
				bus.$emit('tab-close')
				this.$router.push('/pages/base_set/page')
			}
		},
		onShow() {
			console.log('onshow')
			this.dataId = this.$route.query.id || ''
			this.loadData()
		},
		created() {}
	}
</script>

<style></style>
